<template>
  <div class="build">
    <div class="w">
      <div class="get-start">Get Start!</div>
      <div class="describe">创建一个新的知识图谱 从零开始构建你的语义网络</div>
      <div class="create w">
        <div class="input-container">
          <el-input
            placeholder="请输入新建知识图谱名称"
            size="large"
            v-model="name"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-plus" @click="create"
              >创建</el-button
            >
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createKgAPI } from "../../../api/kgbuilder/kgbuilder";

export default {
  name: "BuildKg",
  props: {
    user: { type: Object }
  },
  data() {
    return {
      name: ""
    };
  },
  methods: {
    create() {
      if (this.user === null) {
        this.$emit("adviceLogin");
        return;
      }

      if (this.name === "") {
        this.$message.error("图谱名称不能为空");
        return;
      }

      let message = this.$message.loading("创建中...");
      createKgAPI(
        { kgName: this.name },
        id => {
          let kg = { id: id, name: this.name };
          this.$emit("buildSuccess", kg);
          this.name = "";
          this.$message.success("创建图谱成功!");
        },
        errorMessage => {
          this.$message.error("创建图图谱失败:" + errorMessage);
        },
        () => {
          message.close();
        }
      );
    }
  }
};
</script>

<style scoped>
.build {
  box-sizing: border-box;
  padding-top: 50px;
  background-color: #409eff;
  height: 350px;
  width: 100%;
  color: #ffffff;
  border-bottom: rgb(217, 236, 255) solid 10px;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 15px 10px -15px rgba(0, 0, 0, 0.6);
}
.build .get-start {
  font-size: 80px;
}

.build .describe {
  display: inline-block;
  margin-bottom: 50px;
  padding: 5px 15px 0;
  border-top: #ffffff solid 2px;
}

.build .create .input-container {
  margin: 0 auto;
  width: 350px;
  background-color: #7f7f7f;
}
</style>
